Slide Show LAB

LAB today is to play with Slide Shows. 
The goal is for BOTH to know how to divide a web page into nameable, loadable, parts.
You may refer to:  

There should be no need to work in pairs, but you may ask for help from anyone you wish.

The goal: Create a slide show.
If you do not have any pictures you want to share, go to www.vtc.edu and steal pictures from there.

Submit it via CANVAS or via email.

If you have trouble getting it working, the World Wide Web Consortium provide a simple online tool (https://validator.w3.org/) that automatically check your HTML code and point out any problems/errors your code might have, such as missing closing tags or missing quotes around attributes.

Sample code can be found at:
https://www.w3schools.com/howto/howto_js_slideshow.asp
https://www.w3schools.com/w3js/tryit.asp?filename=tryw3js_slideshow
which uses: https://www.w3schools.com/lib/w3.js

http://www.dynamicdrive.com/dynamicindex14/fullpageslideshow/index.htm
https://www.phpsnaps.com/snaps/view/php-image-slideshow-auto

The goal is to UNDERSTAND how to do it;
Please do not just blindly copy the code.
But if you DO copy code, make sure to cite your source!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<script type="text/javascript">
/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="pumpkin1.jpg"
photos[1]="pumpkin2.jpg"
photos[2]="pumpkin3.jpg"
photos[3]="pumpkin4.jpg"
//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
photoslink[3]=""
//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}

function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}
function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function transport(){
window.location=photoslink[which]
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
  </tr>
</table>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>